<template>
    <div class="music-list">
        <div class="song" v-for="(item, index) in musicList" :key="item.id">
            <!-- 左浮动 -->
            <div class="fl">
                <div class="rank" :class="{ top3: index <= 2 }" v-if="showNum">
                    {{ index >= 9 ? index + 1 : "0" + (index + 1) }}
                </div>

                <div class="content">
                    <!-- 歌名 -->
                    <div class="name">
                        <span>{{ item.name }}</span>
                    </div>

                    <!-- 歌手和码率 -->
                    <div class="artist">
                        <i class="maxBr" v-if="item.song.privilege.maxbr > 320000"></i>
                        <span v-for="(artist, i) in item.song.artists" :key="i">
                            {{ artist.name }}
                            <i v-if="i !== item.song.artists.length - 1">/</i> </span>-
                        <span class="album-name">{{ item.song.album.name }}</span>
                    </div>
                </div>
            </div>

            <!-- 右浮动，播放 -->
            <div class="rl">
                <div class="sgchfl">
                    <span class="hmsprt" @click="paly(item)"></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "musicList",
    props: {
        musicList: {
            type: Array,
            default: [],
        },
        showNum: {
            type: Boolean,
            default: false,
        }
    },
    computed:{
        isPlay:{
            get(){
                return this.$store.state.isPlay
            },
            set(){

            }
        }                 
    },
    methods:{
        paly(music){
            this.$emit('play',music)
            if(this.isPlay){
                return
            }else{
                this.$store.commit('UPDATAISPLAY')
            }
            // console.log(this.musicList[0]);
        }
    }
};
</script>

<style lang="scss" scoped>
.music-list {
    padding: 0 10px 10px 10px;

    .song {
        margin: 10px 0;
        border-bottom: 1px solid rgba(199, 171, 171, 0.2);
        display: flex;
        justify-content: space-between;

        &:last-child {
            border-bottom: 0;
        }

        .fl {
            flex: 1 1 auto;
            padding: 6px 0;
            width: 0;
            display: flex;

            .rank {
                display: flex;
                align-items: center;
                width: 40px;
                font-style: 17px;
                color: #999;
                margin-left: -10px;
                justify-content: center;
            }

            .top3 {
                color: #df3436;
            }

            .content {
                width: 0;
                flex: 1 1 auto;

                .name {
                    font-style: 17px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: normal;

                    .alias {
                        color: #888;
                        margin-left: 4px;
                    }
                }

                .artist {
                    font-size: 12px;
                    color: #888;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-spacing: normal;

                    .maxBr {
                        display: inline-block;
                        width: 12px;
                        height: 8px;
                        margin-right: 4px;
                        background: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=) no-repeat;
                        background-size: 166px 97px;
                    }
                }
            }
        }

        .rl {
            display: flex;
            justify-items: center;

            .sgchfl {
                display: flex;
                -webkit-box-align: center;
                align-items: center;
                padding: 0 10px;

                .hmsprt {
                    display: inline-block;
                    width: 22px;
                    height: 22px;
                    background: url(https://s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28c3767992ca4bb6d4887c74880=) no-repeat;
                    background-position: -24px 0;
                    background-size: 166px 97px;
                }
            }
        }
    }
}
</style>